<template>
  <a-drawer
    :title="title"
    width="40%"
    destroyOnClose
    :visible="visible"
    @close="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col span="24">
            <a-form-model-item label="用户编号" prop="UserCode" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-input v-model="entity.UserCode" autocomplete="off" placeholder="请输入用户编号"/>
            </a-form-model-item>
            <a-form-model-item label="登录账号" prop="UserName" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-input v-model="entity.UserName" autocomplete="off" placeholder="请输入登录名"/>
            </a-form-model-item>
            <a-form-model-item label="登录密码" prop="newPwd" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-input-password v-model="entity.newPwd" autocomplete="off" placeholder="请输入登录密码"/>
            </a-form-model-item>
            <a-form-model-item label="姓名" prop="RealName" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-input v-model="entity.RealName" autocomplete="off" placeholder="请输入姓名"/>
            </a-form-model-item>
            <a-form-model-item label="性别" prop="Sex" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-radio-group v-model="entity.Sex">
                <a-radio :value="0">女</a-radio>
                <a-radio :value="1">男</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="手机号" prop="UserPhone">
              <a-input v-model="entity.UserPhone" autocomplete="off" placeholder="请输入手机号"/>
            </a-form-model-item>
            <a-form-item label="头像" :labelCol="layout.labelCol" :wrapperCol="layout.wrapperCol">
              <c-upload-img v-model="entity.UserAvatarURL" :maxCount="1"></c-upload-img>
            </a-form-item>
            <a-form-model-item label="生日" prop="Birthday" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-date-picker v-model="entity.Birthday" format="YYYY-MM-DD" />
            </a-form-model-item>
            <a-form-model-item label="组织机构" prop="DepartmentId" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-tree-select
                v-model="entity.DepartmentId"
                allowClear
                :treeData="DepartmentIdTreeData"
                placeholder="请选择部门"
                treeDefaultExpandAll
              ></a-tree-select>
            </a-form-model-item>
            <a-form-model-item label="角色" prop="RoleIdList" :labelCol="{ style: 'width: 20%;float:left;' }">
              <a-select v-model="entity.RoleIdList" allowClear mode="multiple" placeholder="请选择角色">
                <a-select-option v-for="item in RoleOptionList" :key="item.Id">{{ item.RoleName }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '5px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1
      }"
    >
      <a-button @click="close">取消</a-button>&nbsp;
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>
  </a-drawer>
</template>

<script>
import moment from 'moment'
import CUploadImg from '@/components/CUploadImg/CUploadImg.vue'
export default {
  components: {
    CUploadImg
  },
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data () {
    return {
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      visible: false,
      confirmLoading: false,
      entity: {},
      title: '',
      DepartmentIdTreeData: [],
      RoleOptionList: [],
      rules: {
        UserName: [{ required: true, message: '必填' }],
        RealName: [{ required: true, message: '必填' }],
        Sex: [{ required: true, message: '必填' }]
      }
    }
  },
  methods: {
    close () {
      this.visible = false

      this.entity = {}
    },
    init () {
      this.visible = true
      this.entity = { Birthday: moment() }
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.$http.post('/Base_Manage/Base_Department/GetTreeDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.DepartmentIdTreeData = resJson.Data
        }
      })
      this.$http.post('/Base_Manage/Base_Role/GetDataList', {}).then(resJson => {
        if (resJson.Success) {
          this.RoleOptionList = resJson.Data
        }
      })
    },
    openForm (id, title) {
      this.init()
      this.title = title
      if (id) {
        this.$http.post('/Base_Manage/Base_User/GetTheData', { id: id }).then(resJson => {
          this.entity = {}
          setTimeout(() => {
            this.entity = resJson.Data
            if (this.entity['Birthday']) {
              this.entity['Birthday'] = moment(this.entity['Birthday'])
            }
          }, 1)
        })
      }
    },
    handleSubmit () {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.confirmLoading = true
        this.$http.post('/Base_Manage/Base_User/SaveData', this.entity).then(resJson => {
          this.confirmLoading = false

          if (resJson.Success) {
            this.$message.success('操作成功!')
            this.afterSubmit()
            this.visible = false
          } else {
            this.$message.error(resJson.Msg)
          }
        })
      })
    }
  }
}
</script>
